<template>
	<view class="skockOne">
		<u-navbar :is-back="false" title="优机小羊" title-size="33" :background="background" title-color="#2e2e2e"
			:border-bottom="false">
		</u-navbar>
		<view class="head_portrait">
			<view class="header_top">
				<view class="hiden_box">
					<view class="left">
						<image :src="managerQuery.shop_info.category_image" mode="aspectFill" class="icon"></image>
						<view class="title">
							{{managerQuery.shop_info.shop_name}}
						</view>
					</view>
					<view class="right" @click="popupShow = true">
						切换
						<u-icon name="play-right-fill" color="#dbdbdb" size="16"></u-icon>
					</view>
				</view>
			</view>
			<view class="head_box">
				<u-icon name="question-circle" color="#dbdbdb" size="26" class="question"></u-icon>
				<view class="comlum_box gang">
					<view class="child_box">
						<view class="time_box">
							<view class="left">
								本月(元)
							</view>
							<image :src="openEye?$IMG_URL('/static/user/eye.png'):$IMG_URL('/static/user/eyeoff.png')"
								mode="" :class="openEye?'eye':'eyeoff'" @click="openEye = !openEye"></image>
						</view>
						<view class="bottom" v-if="openEye">
							<text class="size1">{{ $FORMATCOST(managerQuery.month_cost).integer }}</text>
							<text class="size2">{{ $FORMATCOST(managerQuery.month_cost).decimal }}</text>
						</view>
						<view class="bottom" v-else>
							<view class="size1">
								****
							</view>
						</view>
					</view>
					<view class="child_box">
						<view class="time_box">
							<view class="left">
								会员卡(元)
							</view>
						</view>
						<view class="bottom" v-if="openEye">
							<text class="size1">{{ $FORMATCOST(managerQuery.month_cost).integer }}</text>
							<text class="size2">{{ $FORMATCOST(managerQuery.month_cost).decimal }}</text>
						</view>
						<view class="bottom" v-else>
							<view class="size1">
								****
							</view>
						</view>
					</view>
				</view>
				<view class="comlum_box ">
					<view class="child_box">
						<view class="time_box">
							<view class="left">
								今日(元)
							</view>
						</view>
						<view class="bottom" v-if="openEye">
							<text class="size1">{{ $FORMATCOST(managerQuery.month_cost).integer }}</text>
							<text class="size2">{{ $FORMATCOST(managerQuery.month_cost).decimal }}</text>
						</view>
						<view class="bottom" v-else>
							<view class="size1">
								****
							</view>
						</view>
					</view>
					<view class="child_box">
						<view class="time_box">
							<view class="left">
								课程(元)
							</view>
						</view>
						<view class="bottom" v-if="openEye">
							<text class="size1">{{ $FORMATCOST(managerQuery.month_cost).integer }}</text>
							<text class="size2">{{ $FORMATCOST(managerQuery.month_cost).decimal }}</text>
						</view>
						<view class="bottom" v-else>
							<view class="size1">
								****
							</view>
						</view>
					</view>
				</view>
				<u-icon name="play-right-fill" color="#dbdbdb" size="16" class="play"></u-icon>
			</view>
		</view>
		<view class="scound-box">
			<view class="scound-header">
				<view class="left">
					2025-03
				</view>
				<u-icon name="question-circle" color="#dbdbdb" size="26"></u-icon>
			</view>
			<view class="row_box">
				<view class="comlum_box gang">
					<view class="child_box">
						<view class="time_box">
							<view class="left">
								本月(元)
							</view>
							<image :src="openEye?$IMG_URL('/static/user/eye.png'):$IMG_URL('/static/user/eyeoff.png')"
								mode="" :class="openEye?'eye':'eyeoff'" @click="openEye = !openEye"></image>
						</view>
						<view class="bottom" v-if="openEye">
							<text class="size1">{{ $FORMATCOST(managerQuery.month_cost).integer }}</text>
							<text class="size2">{{ $FORMATCOST(managerQuery.month_cost).decimal }}</text>
						</view>
						<view class="bottom" v-else>
							<view class="size1">
								****
							</view>
						</view>
					</view>
					<view class="child_box">
						<view class="time_box">
							<view class="left">
								会员卡(元)
							</view>
						</view>
						<view class="bottom" v-if="openEye">
							<text class="size1">{{ $FORMATCOST(managerQuery.month_cost).integer }}</text>
							<text class="size2">{{ $FORMATCOST(managerQuery.month_cost).decimal }}</text>
						</view>
						<view class="bottom" v-else>
							<view class="size1">
								****
							</view>
						</view>
					</view>
				</view>
				<view class="comlum_box gang">
					<view class="child_box">
						<view class="time_box">
							<view class="left">
								本月(元)
							</view>
						</view>
						<view class="bottom" v-if="openEye">
							<text class="size1">{{ $FORMATCOST(managerQuery.month_cost).integer }}</text>
							<text class="size2">{{ $FORMATCOST(managerQuery.month_cost).decimal }}</text>
						</view>
						<view class="bottom" v-else>
							<view class="size1">
								****
							</view>
						</view>
					</view>
					<view class="child_box">
						<view class="time_box">
							<view class="left">
								会员卡(元)
							</view>
						</view>
						<view class="bottom" v-if="openEye">
							<text class="size1">{{ $FORMATCOST(managerQuery.month_cost).integer }}</text>
							<text class="size2">{{ $FORMATCOST(managerQuery.month_cost).decimal }}</text>
						</view>
						<view class="bottom" v-else>
							<view class="size1">
								****
							</view>
						</view>
					</view>
				</view>
				<view class="comlum_box">
					<view class="child_box">
						<view class="time_box">
							<view class="left">
								本月(元)
							</view>

						</view>
						<view class="bottom" v-if="openEye">
							<text class="size1">{{ $FORMATCOST(managerQuery.month_cost).integer }}</text>
							<text class="size2">{{ $FORMATCOST(managerQuery.month_cost).decimal }}</text>
						</view>
						<view class="bottom" v-else>
							<view class="size1">
								****
							</view>
						</view>
					</view>
					<view class="child_box">
						<view class="time_box">
							<view class="left">
								会员卡(元)
							</view>
						</view>
						<view class="bottom" v-if="openEye">
							<text class="size1">{{ $FORMATCOST(managerQuery.month_cost).integer }}</text>
							<text class="size2">{{ $FORMATCOST(managerQuery.month_cost).decimal }}</text>
						</view>
						<view class="bottom" v-else>
							<view class="size1">
								****
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: 'transparent',
				},
				managerQuery: {
					shop_info: {
						shop_name: '温州中庚漫游天地店'
					},
					month_cost:"85260.00"
				},
				// 切换门店
				popupShow: false,
				openEye: false,
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	page{
	
	}
	.gang {
		border-right: 1rpx solid #e9e9e9;
	}
	.eye {
		width: 36rpx;
		height: 22rpx;

	}

	.eyeoff {
		width: 34rpx;
		height: 14rpx;
	}

	.skockOne {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 750rpx;
		height: 100vh;
		background: linear-gradient(180deg, #73F0EA, rgba(255, 255, 255, 0.00));

		.head_portrait {
			margin-top: 24rpx;
			width: 686rpx;
			display: flex;
			flex-direction: column;

			.header_top {
				width: 686rpx;
				height: 120rpx;
				background: rgba(255, 255, 255, 0.5);
				border-radius: 32rpx 32rpx 0rpx 0rpx;

				.hiden_box {
					width: 100%;
					height: 88rpx;
					border-radius: 32rpx 32rpx 0rpx 0rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					padding: 0 32rpx;

					.left {
						display: flex;
						flex-direction: row;
						flex: 1;

						.icon {
							width: 114rpx;
							height: 36rpx;
							margin-right: 12rpx;
						}

						.title {
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-Bold;
							font-weight: 700;
							color: #333333;
						}
					}

					.right {
						display: flex;
						flex-direction: row;
						align-items: center;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						text-align: right;
						color: #666666;

						.icon1 {
							width: 10rpx;
							height: 16rpx;
							margin-left: 8rpx;
						}
					}
				}
			}

			.head_box {
				margin-top: -32rpx;
				width: 686rpx;
				height: 300rpx;
				background: #ffffff;
				border-radius: 32rpx;
				padding-top: 40rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				position: relative;
				.question{
					position: absolute;
					right: 31rpx;
					top: 31rpx;
				}
				
				.play{
					position: absolute;
					right: 32rpx;
					top: 50%;
					transform: translateY(-50%);
				}
				

				.comlum_box {
					display: flex;
					flex-direction: column;
					padding-left: 40rpx;
					flex: 0.5;
					height: 236rpx;

					.child_box {
						display: flex;
						flex-direction: column;
						width: 100%;
						flex: 0.5;
						.time_box {
							display: flex;
							flex-direction: row;
							align-items: center;
							font-size: 24rpx;
							color: #666666;
							width: 100%;
							padding-right: 20rpx;

							.left {
								flex: 1;
							}
						}
						.bottom{
							margin-top: 8rpx;
							font-size: 36rpx;
							font-family: DIN, DIN-Bold;
							font-weight: 700;
							text-align: left;
							color: #000000;
						}
					}
				}
			}
		}
		.scound-box{
			margin-top: 24rpx;
			width: 686rpx;
			height: 368rpx;
			background: #ffffff;
			border-radius: 32rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 4rpx;
			.scound-header{
				width: 678rpx;
				height: 92rpx;
				background: linear-gradient(180deg, rgba(129,202,197,0.3), rgba(129,202,197,0));
				border-radius: 32rpx 32rpx 0rpx 0rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 0 27rpx 0 36rpx;
				.left{
					flex: 1;
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					color: #333333;
				}
			}
			.row_box{
				display: flex;
				flex-direction: row;
				width: 100%;
				.comlum_box {
					display: flex;
					flex-direction: column;
					padding-left: 40rpx;
					flex: 0.333;
					height: 236rpx;
				
					.child_box {
						display: flex;
						flex-direction: column;
						width: 100%;
						flex: 0.5;
						.time_box {
							display: flex;
							flex-direction: row;
							align-items: center;
							font-size: 24rpx;
							color: #666666;
							width: 100%;
							padding-right: 20rpx;
				
							.left {
								flex: 1;
							}
						}
						.bottom{
							margin-top: 8rpx;
							font-size: 36rpx;
							font-family: DIN, DIN-Bold;
							font-weight: 700;
							text-align: left;
							color: #000000;
						}
					}
				}
			}
		}
	}
</style>